﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string[]>" %>

<tr class="city-location-subarea">
    <th ><span class="mandate">*</span> City/Zone</th>
    <td>
        <select data-bind="options: availableCity, 
                   optionsCaption:'Please select...',
                   optionsText: 'CityName',
                   optionsValue: 'CityID',
                   value:selectedCity
                   " class="validate[required] chz  hide" id="vmCity" name="City"></select> 
    </td>
    
    </tr>
<tr class="tr-location city-location-subarea" >
  <th ><span class="mandate">*</span> Location</th>
 <td>
        <select data-bind="options: availableLocation, 
                   optionsCaption:'Please select...',
                   optionsText: 'LocationName',
                   optionsValue: 'LocationID',
                   value:selectedLocation
                   " class="validate[required] chz  hide" id="vmLocation" name="Location"></select> 
    </td>
    
</tr>
<tr class="tr-subarea city-location-subarea" >
  <th ><span class="mandate">*</span> Subarea</th>
 <td>
       <select data-bind="options: availableSubrea, 
                   optionsCaption:'Please select...',
                   optionsText: 'SubareaName',
                   optionsValue: 'Subarea_ID',
                   value:selectedSubarea
                   " class="validate[required] chz  hide" id="vmSubarea" name="Subarea"></select> 
    </td>
    
</tr>

<script type="text/javascript">
    $(document).ready(function() {
          cityselected ="";
         <% if(Model[0].ToString()!=""){
         %>
            cityselected = <%=Model[0].ToString()%>;
         <%}  %>
       
        locationselected ="";
         <% if(Model[1].ToString()!=""){
         %>
            locationselected = <%=Model[1].ToString()%>;
         <%}  %>
         subareaselected = "";
         <% if(Model[2].ToString()!=""){
         %>
            subareaselected = <%=Model[2].ToString()%>;
         <%}  %>
        var isfirst = 0;
        System.Data.CityLocationSubarea = function() {
            var self = this;
            //
            // Initially set to false so UI will show 'Loading...'
            self.initialized = ko.observable(false);

            self.availableCity = ko.observableArray([]);
            self.availableLocation = ko.observableArray([]);
            self.availableSubrea = ko.observableArray([]);
            self.selectedCity = ko.observable('');
            self.selectedLocation = ko.observable('');
            self.selectedSubarea = ko.observable('');
            //
            self.loadLocation = function(cityid) {
                $.getJSON(BASE_URL + "Listings/Ajax/GetLocation/" + cityid, function(result) {

                    self.availableLocation.removeAll();
                    self.availableLocation(result.Data);
                    // Removing the li containers that follow (if any)

                     
                    if (self.availableLocation().length > 0) {

                        $("#vmLocation").chosen({
                            allow_single_deselect: true
                        });
                    
                        if(locationselected!=""){
                            
                             $("#vmLocation").val(locationselected).trigger("liszt:updated");
                             self.loadSubarea(locationselected);
                        }else
                        {
                         $("#vmLocation").trigger("liszt:updated");
                        }
                       
                        $("#vmLocation").removeClass("hide");
                        $(".tr-location").removeClass("hide");
                    } else {
                    
                        $("#vmLocation").chosen({
                            allow_single_deselect: true
                        });
                        
                        $("#vmLocation").trigger("liszt:updated");
                        $("#vmLocation").addClass("hide");
                        $(".tr-location").addClass("hide");
                    }
                });

            }
            //
            self.loadSubarea = function(id) {
                $.getJSON(BASE_URL + "Listings/Ajax/GetSubarea/" + id, function(result) {

                    self.availableSubrea.removeAll();
                    self.availableSubrea(result.Data);
                    // Removing the li containers that follow (if any)
                
                    var length = self.availableSubrea().length;
                  
                    $("#vmSubarea").chosen({
                            allow_single_deselect: true
                        });
                        if(subareaselected !=""){
                           
                            $("#vmSubarea").val(subareaselected).trigger("liszt:updated");
                        }
                        else
                        {
                           $("#vmSubarea").trigger("liszt:updated");
                           
                        }
                   
                    if ( length >  0) {
   
                        $("#vmSubarea").removeClass("hide");
                        $(".tr-subarea").removeClass("hide");
                    } else {
                         $("#vmSubarea").addClass("hide");
                            $(".tr-subarea").addClass("hide");
                        /* }
                         if(length == 0){    
                         
                          $("#vmSubarea").addClass("hide");
                            $(".tr-subarea").addClass("hide");
                         }
                         if(isfirst == 0 && length == 0){
                         
                            $("#vmSubarea").removeClass("hide");
                            $(".tr-subarea").removeClass("hide");
                         }else
                         {
                         
                            $("#vmSubarea").addClass("hide");
                            $(".tr-subarea").addClass("hide");
                         }*/
                        
                    }
                });

            }
            //
            self.selectedCity.subscribe(function(newValue) {        
                
                if (newValue) {
                    isfirst = 1;
                    self.loadLocation(newValue);
                    self.loadSubarea(0);
                   
                } else {
                    //location 
                    self.availableLocation.removeAll();
                    $("#vmLocation").trigger("liszt:updated");
                    //subarea
                    if(isfirst != 1)  isfirst = 0;
                       
                    self.loadSubarea(0);
                   
                    
                }
            } );
            //
            self.selectedLocation.subscribe(function(newValue) {
                if (newValue) {
                    isfirst = 1;
                    self.loadSubarea(newValue);

                } else {
                    if(isfirst != 1)  isfirst = 0;
                    self.availableSubrea.removeAll();
                    $("#vmSubarea").trigger("liszt:updated");
                }
            } );


            //Init City
            (function() {
                $.getJSON(BASE_URL + "Listings/Ajax/GetCity", function(result) {
                    self.availableCity(result.Data);

                    $("#vmCity").chosen({
                        allow_single_deselect: true
                    });
                    // For edit 
                    if(cityselected!=""){
                      $("#vmCity").val(cityselected).trigger("liszt:updated");
                       //location
                        self.loadLocation(cityselected);
                         
                       
                    }else
                    {
                          $("#vmCity").removeClass("hide");
                          $("#vmLocation").chosen({
                                allow_single_deselect: true
                            });
                            $("#vmLocation").removeClass("hide");
                            //Load Subarea
                              $("#vmSubarea").chosen({
                                allow_single_deselect: true
                            });
                            $("#vmSubarea").removeClass("hide");
                            
                        
                    }
                  
                  
                });

            })();


        }

        var vmCityLocationSubarea = new System.Data.CityLocationSubarea();
        ko.applyBindings(vmCityLocationSubarea,$("#vmCity")[0]);
        ko.applyBindings(vmCityLocationSubarea,$("#vmLocation")[0]);
        ko.applyBindings(vmCityLocationSubarea,$("#vmSubarea")[0]);


        //  vmCityLocationSubarea.loadLocation();
    });

</script>